<template>
    <ul>
		<li v-for="(item,index) in listener" :key="index"  @click="redic(index)" :class="{bgWhite:index==liIndex,bgRed:index!=liIndex}">
			<a href="javascript:;" :class="{colorRed:index==liIndex,colorWhite:index!=liIndex}">{{item[0]}}</a>
		</li>
    </ul>
</template>
<script>
// APP矩阵组件的导航
export default {
	data(){
		return {
			variable:["shortVideo","redBook"],
			listener:[
				["品牌类广告"],
				["效果类广告"],
			],
			liIndex:0
		}
	},
	methods:{
		redic(index){
			this.$emit("showShortVideo",this.variable[index])
			this.liIndex = index
		}
	}
};
</script>
<style scoped>
ul{
    overflow: hidden;
    width:760px;
}
ul li{
	float: left;
	width: 50%;
	height: 38px;
	text-align: center;
	line-height: 38px;
	background-color: #EE4041;
}
ul li a{
	font-size: 16px;
}
.colorRed{
	color:#EE4041;
}
.colorWhite{
	color:#fff;
}
.bgWhite{
	background: #fff;
}
.bgRed{
	background: #EE4041;
}
</style>